<template>
	<d2-container>
		<!-- 步骤条 -->
		<template>
			<div class="step">
				<el-steps :active="stepIndex" align-center finish-status="success">
					<el-step>
						<template slot="title">
							<div class="step-title">添加商品基本信息</div>
						</template>
					</el-step>
					<el-step>
						<template slot="title">
							<div class="step-title">添加商品规格SKU</div>
						</template>
					</el-step>
					<el-step>
						<template slot="title">
							<div class="step-title">添加商品销售SKU</div>
						</template>
					</el-step>
					<el-step>
						<template slot="title">
							<div class="step-title">添加供应商</div>
						</template>
					</el-step>
				</el-steps>
			</div>
		</template>

		<!-- 第一步 -->
		<template v-if="stepIndex == 0">
			<step-one
				ref="step1"
				:productDetails="productDetails"
				@step="step"
				@next="next"
				@close="closeForm"
			></step-one>
		</template>

		<!-- 第二步 商品SKU规格 -->
		<template v-if="stepIndex == 1">
			<step-two
				ref="step2"
				:productDetails="productDetails"
				@next="next"
				@step="step"
				@close="closeForm"
			></step-two>
		</template>

		<!-- 第三步 -->
		<template v-if="stepIndex == 2">
			<step-three
				ref="step3"
				:productDetails="productDetails"
				:categoryTree="categoryTree"
				@next="next"
				@step="step"
				@close="closeForm"
			></step-three>
		</template>

		<!-- 第四步 -->
		<template v-if="stepIndex == 3">
			<step-four
				ref="step4"
				:productDetails="productDetails"
				@step="step"
				@close="closeForm"
			></step-four>
		</template>
	</d2-container>
</template>

<script>
	import { mapActions, mapState } from 'vuex'
	import { findCategoryTree } from '@api/product/productCategoryFront'
	import { findProductDetails, findProductUnitListByProductId } from '@api/product/product'
	import stepOne from './components/step1'
	import stepTwo from './components/step2'
	import stepThree from './components/step3'
	import stepFour from './components/step4'
	export default {
		name: 'product-productInfoSku-add',
		components: {
			stepOne,
			stepTwo,
			stepThree,
			stepFour
		},
		data () {
			return {
				stepIndex: 0,
				checkStep: 0,
				productDetails: {},
				categoryTree: [], //展示分类（小程序使用）
			}
		},
		computed: {
			...mapState('d2admin/page', ['opened', 'current'])
		},
		methods: {
			...mapActions('d2admin/page', ['close']),
			
			getProductDetails() { // 获取商品详情
				findProductDetails({ id: sessionStorage.getItem('productId') })
					.then(res => {
						this.productDetails = res.data;
					})
			},
			getFrontCategoryList() { // 获取展示分类
				findCategoryTree({ parentId: 0 })
					.then(res => {
						// 调用递归方法，去除级联数据后将数据赋值给级联选择器
						this.categoryTree = this.dealTreeData(res.data);
					})
					.catch(err => {
						console.log('err', err)
					})
			},
			dealTreeData(data) { // 分类数据整理
				for (var i = 0; i < data.length; i++) {
					if (data[i].children == 'null' || data[i].children.length < 1) {
						// children若为空数组，则将children设为undefined
						data[i].children = undefined;
					} else {
						// children若不为空数组，则继续 递归调用 本方法
						this.dealTreeData(data[i].children);
					}
				}
				return data;
			},

			// 保存
			closeForm () { // 关闭当前窗口
				let tagName = this.current;
				this.close({ tagName });
			},
			next (index) { // 下一步
				this.stepIndex = index;
				
				if (index == 2) { // 进入第3步前重新获取数据
					this.getProductDetails()
					
					setTimeout(() => {
						this.$refs.step3.initData();
					}, 100);
				}
				
				// 滚动条回顶部
				let div = document.querySelector(`.d2-container-full__body`);
				div.scrollTop = 0;
			},

			// 点击进度条
			step (index) {
				if (index > this.stepIndex) {	  
					this.$message.warning('请按顺序添加商品信息！');
					return;
				}

				if (index == 1) {
					this.$refs.step1.onSubmit('addForm');
				} else if (index == 2) {
					this.$refs.step2.onSubmit();
				}

				this.stepIndex = index;
			}
		},
		created() {
			this.getFrontCategoryList();
		}
	}
</script>

<style lang="scss" scoped>
	.step {
		width: 80%;
		padding: 20px 0;
		.step-title {
			cursor: pointer;
			padding: 6px 0;
		}
	}
</style>
